<template>
  <div class="noFinished-container">
    <!-- 查看计分表弹出层 -->
    <van-popup
      v-model="StatisticalTableShow"
      position="right"
      :overlay="false"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}">

        <StatisticalTable></StatisticalTable>
    </van-popup>
    <div v-for="(item,index) in this.endbisai" :key="index">
      <div class="time" >
        <p>{{ item.time }}</p>
        </div>
        <div class="content">
          <!-- 顶部 -->
          <div class="content-top">
            <div class="top-left">
              <p>{{ item.state }}</p>
            </div>

          </div>
          <!-- 中间 -->
          <div class="content-center">
            <div class="left-aside">
              <p>{{ endData_obj.First_team.total }}</p>
              <p>{{ endData_obj.Second_team.total }}</p>
            </div>
            <div class="center-left">

              <div class="left-top">
                <van-image
                  round
                  width="10vw"
                  height="10vw"
                  :src="require('@/images/serve/basketball/basketball.jpg')"
                />
                <p>{{ item.text1 }}</p>
              </div>

              <div class="left-btm">
                <van-image
                  round
                  width="10vw"
                  height="10vw"
                  :src="require('@/images/serve/basketball/basketball.jpg')"
                />
                <p>{{ item.text2 }}</p>

              </div>
            </div>
            <div class="center-right">
              <div class="right-top">
                <p>{{ item.time1 }}</p>
              </div>
              <div class="right-btm">
                <p>17:50</p>
              </div>
            </div>
          </div>

          <!-- 底部 -->
          <div class="content-btm">
            <div class="btm-right" @click="jfshow(index,$event)">
              <p>查看积分表</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import StatisticalTable from '@/components/StatisticalTable/StatisticalTable.vue'

export default {
  name: 'e_finished',
  data() {
    return {
      id: 0,
      StatisticalTableShow: false
    }
  },
  computed: {
    ...mapState(['CreateLeague', 'endData_obj', 'endbisai', 'logoindex', 'creatDataId', 'allList'])
  },
  components: {
    StatisticalTable
  },

  methods: {
    jfshow(data) {
      this.id = data
      console.log('id', data, '已结束比赛的信息', this.endbisai[this.id].time)
      this.StatisticalTableShow = !this.StatisticalTableShow
    }
  },
  mounted() {
    console.log('一队总分', this.endData_obj.First_team.total)
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.noFinished-container{
  background-color: rgb(255, 255, 255);
  width: 100%;
}
.time{
  background-color: rgb(219, 219, 219);
  font-size: 2vw;
  padding: 2vw 0 2vw 3vw;
}
.content{
  /* background-color: blueviolet; */
  width: 94%;
  margin: 0 auto;
}
.content-top{
  height: 10vw;
  line-height: 10vw;
  /* background-color: rgb(158, 158, 158); */
  font-size: 3vw;
  color: rgb(0, 0, 0);
}
.content-center{
  /* background-color: antiquewhite; */
  height: 25vw;
}
.left-aside{
  position:absolute;
  right: 32%;
  width: 10%;
  height: 25vw;
  line-height: 11.5vw;
  font-size: 2vw;
  text-align: center;
  background-color: antiquewhite;
}
.left-aside p:first-child{
  color: red;
}
.center-left,.center-right{
  float: left;
  box-sizing: border-box;
  /* border: 2px saddlebrown solid; */
  height: 25vw;
}
.center-left{
  width: 70%;
}
.center-right{
  width: 20vw;
  border-left: 4px solid gray;
  line-height: 11.5vw;
  text-align: center;

  font-size: 3vw;
}
.left-top{
  position: relative;
}
.left-top p{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%);
}
.right-top{
  line-height: 20vw;
  height: 10vw;
}
::v-deep.van-image{
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%,-50%);
}
.left-btm p{
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%);
}
.left-btm{
  position: relative;
}
.center-left div{

  height: 50%;
  /* background-color: rgb(139, 139, 139); */
  line-height: 11.5vw;
}

.content-btm{
  height: 10vw;
  line-height: 10vw;
  /* background-color: aqua; */
}
.btm-right{
  float: right;
  font-size: 2vw;
}
</style>
